<template>
  <div class="delivery_top" :style="{ 'background-image': `url(${pageObj.background})` }">
    <div class="delivery_top_box">
      <div class="delivery_top_address">
        <i class="el-icon-location" style="font-size: 20px; color: #fff"></i>
        <p>当前位置定位中...</p>
        <i class="el-icon-arrow-right" style="color: #fff"></i>
        <i class="el-icon-bell" style="color: #fff; margin-left: auto"></i>
        <i class="el-icon-copy-document" style="color: #fff; margin-left: 5px"></i>
      </div>
      <div class="delivery_top_search">
        <el-input size="small" placeholder="请输入商品标题" prefix-icon="el-icon-search"></el-input>
      </div>
      <div class="delivery_top_carousel" v-if="slidesList.banner && slidesList.banner.length > 0 && slidesList.show == '1'">
        <el-carousel height="140px" indicator-position="none">
          <el-carousel-item v-for="(item, index) in slidesList.banner" :key="index">
            <img style="width: 100%" :src="$fnc.getImgUrl(item.piclink + '?' + new Date().getTime())" />
          </el-carousel-item>
        </el-carousel>
      </div>
    </div>

    <div class="delivery_top_product">
      <div v-if="menuList.show">
        <div class="top_product_title">
          <p>{{ menuList.title || "---" }}</p>
          <p>{{ menuList.title_en || "---" }}</p>
        </div>
        <div class="top_product_box">
          <div class="top_product_box_scrool">
            <div class="top_product_item" v-for="(item, i) in 10" :key="i">
              <img src="https://inexweb.oss-cn-shenzhen.aliyuncs.com/uni/resource/image/default/202208/5d9bb5dbbecdb2b73d003af1fef8c111.jpg" />
              <p>置顶商品</p>
              <div class="yknumber">立即购买</div>
            </div>
          </div>
        </div>
      </div>
      <div class="top_product_banner" v-if="headericon.show == 1">
        <!-- <div class="top_banner_title">
          <p>{{ headericon.title }}</p>
          <p>{{ headericon.title_en }}</p>
          <div class="">
            <p>{{ headericon.text }}</p>
            <i class="el-icon-arrow-right" style="color: #f4251f; font-size: 12px"></i>
          </div>
        </div> -->
        <div class="top_banner_box">
          <div class="banner_box_item">
            <img :src="$fnc.getImgUrl(leftIcon.title)" alt="" style="width: 100%" />
            <!-- <p>{{ leftIcon.title || "---" }}</p>
            <p>{{ leftIcon.piclink || "---" }}</p> -->
          </div>
          <div class="banner_box_item">
            <img :src="$fnc.getImgUrl(rightIcon.title)" alt="" style="width: 100%" />
            <!-- <p>{{ rightIcon.title || "---" }}</p>
            <p>{{ rightIcon.piclink || "---" }}</p> -->
          </div>
        </div>
      </div>
      <!-- <div class="top_product_banner" v-if="headericon.show">
        <div class="top_banner_title">
          <p>{{ headericon.title }}</p>
          <p>{{ headericon.title_en }}</p>
          <div class="">
            <p>{{ headericon.text }}</p>
            <i class="el-icon-arrow-right" style="color: #f4251f; font-size: 12px"></i>
          </div>
        </div>
        <div class="top_banner_box">
          <div class="banner_box_item">
            <p>{{ leftIcon.title || "---" }}</p>
            <p>{{ leftIcon.piclink || "---" }}</p>
          </div>
          <div class="banner_box_item">
            <p>{{ rightIcon.title || "---" }}</p>
            <p>{{ rightIcon.piclink || "---" }}</p>
          </div>
        </div>
      </div> -->
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  data() {
    return {};
  },
  computed: {
    ...mapState({
      pageObj: (state) => state.modulePage.moduledata,
      headericon: (state) => state.modulePage.data.headericon,
      menuList: (state) => state.modulePage.data.menu,
      slidesList: (state) => state.modulePage.data.slides,
    }),
    leftIcon() {
      try {
        if (this.headericon.banner[0]) {
          return this.headericon.banner[0];
        } else {
          return {};
        }
      } catch {
        return {};
      }
    },
    rightIcon() {
      try {
        if (this.headericon.banner[1]) {
          return this.headericon.banner[1];
        } else {
          return {};
        }
      } catch {
        return {};
      }
    },
    isShowAddress() {
      if (this.pageObj.tuanzhang == "1") {
        return true;
      } else {
        return false;
      }
    },
  },
  created() {},
  mounted() {},
  methods: {},
};
</script>
<style lang="less" scoped>
.delivery_top {
  width: 100%;
  // background-color: #f3241c;
  // background-image: url("https://inexweb.oss-cn-shenzhen.aliyuncs.com/uni/page/deliver_bj.png");
  background-position: top bottom;
  background-size: 100% auto;
  background-repeat: no-repeat;
  padding-bottom: 1px;

  .delivery_top_address {
    padding: 13px;
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
    line-height: 1.3;

    > p {
      font-size: 15px;
      color: #fff;
      font-weight: 500;
      margin: 0 5px 0 5px;
      max-width: 200px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
  .delivery_top_carousel {
    padding: 0 13px;
  }
  .delivery_top_search {
    padding: 0 13px 13px 13px;
    border-radius: 25px;
    /deep/input {
      border-radius: 25px;
    }
  }

  .delivery_top_product {
    width: 93%;
    padding: 10px;
    margin: 0 auto 10px auto;
    // background-color: #ff6a49;
    border-radius: 12.5px;
    // background-image: linear-gradient(#fe6c49, #ff6148, #fd5845);
    background-color: #fe4f52;

    .top_product_title {
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 5px;

      > p:nth-of-type(1) {
        font-size: 17px;
        color: #fff;
        font-weight: bold;
        letter-spacing: 1px;
      }

      > p:nth-of-type(2) {
        font-size: 13px;
        color: #fff;
      }
    }
    .top_product_box {
      width: 100%;
      background-color: #ffffff;
      border-radius: 12.5px;
      overflow: hidden;
      height: 160px;
      .top_product_box_scrool {
        overflow-x: auto;
        display: inline-flex;
        justify-content: flex-start;
        align-items: center;
        white-space: nowrap;

        // box-sizing: unset;
        .top_product_item:last-of-type {
          margin-right: 20rpx;
        }

        .top_product_item {
          width: 90px;
          display: inline-flex;
          flex-flow: column;
          justify-content: flex-start;
          align-items: center;
          margin: 10px 0 10px 10px;

          > img {
            width: 90px;
            height: 90px;
            object-fit: cover;
          }

          > p {
            width: 100%;
            // @include text-overflow(180rpx, 2);
            font-size: 12px;
            font-weight: bold;
            color: #000;
            text-align: left;
            margin: 5px 0;
          }

          > div {
            font-size: 12px;
            color: #fff;
            font-weight: bold;
            padding: 2px 5px;
            border-radius: 12.5px;
            background-image: linear-gradient(to right, #ff6e40, #fb2026);
          }
        }
      }
    }
    .top_product_banner {
      margin: 15px 0 5px 0;

      .top_banner_title {
        width: 100%;
        display: flex;
        flex-wrap: nowrap;
        justify-content: flex-start;
        align-items: center;

        > p:nth-of-type(1) {
          font-size: 17px;
          letter-spacing: 1px;
          color: #fff;
          font-weight: bold;
        }

        > p:nth-of-type(2) {
          font-size: 14px;
          color: #fff;
          padding-left: 18px;
          position: relative;
        }

        > p:nth-of-type(2)::after {
          width: 1px;
          height: 12.5px;
          background-color: #fff;
          position: absolute;
          left: 8px;
          top: 2px;
          content: "";
        }

        > div {
          font-size: 12px;
          font-weight: 500;
          color: #f4251f;
          background-color: #feefda;
          border-radius: 25px;
          display: flex;
          flex-wrap: nowrap;
          justify-content: center;
          align-items: center;
          padding: 3px 7.5px;
          margin-left: auto;
        }
      }

      .top_banner_box {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 10px;

        .banner_box_item {
          width: 160px;
          // height: 65px;
          // background: url("https://inexweb.oss-cn-shenzhen.aliyuncs.com/uni/page/deliver_top_banner.png") no-repeat;
          background-size: 100% 100%;
          display: flex;
          flex-flow: column;
          justify-content: center;
          align-items: center;
          //   @include flex-center(column, center, center);

          > p {
            font-weight: 500;
          }

          > p:nth-of-type(1) {
            font-size: 16px;
            color: #f3251f;
          }

          > p:nth-of-type(2) {
            font-size: 14px;
            color: #9a9a9a;
          }
        }
      }
    }
  }
}
</style>
